<template>
  <div class="pageCon pr" style="background-color: #fff; height: 100%; min-width: 1000px">
    <!--顶部工具条 start-->
    <div id="topToolBar">
      <!--01-->
      <div class="clearfix pr animated bounceInRight" v-show="beforeSelect">
        <h3 class="fl PageTitle">政策解读</h3>
        <span style="z-index: 2" id="PageIcon" class="PageIcon fl" @click.stop="searchShow=true;rightEnter=false;searchColor='#2599ec'">
          <Icon style="z-index: 1" type="search" :color="searchColor" size="20"></Icon>
        </span>
        <Button v-show="backToListShow" class="fr backToList mt15 mr20" type="ghost" icon="reply" @click="reloadPage">返回列表</Button>
        <!--检索框 start-->
        <transition name="fade">
          <div @click.stop="searchShow = true" id="searchPop" class="searchPop clearfix" v-show="searchShow">
            <!--检索导航 start-->
            <div class="searchMenu fl">
              <a href="javascript:;" class="block menuName transi mt15" :class="{'active': serTitOn}" @click.stop="serShow = true;serTitOn=true">常用检索</a>
              <a href="javascript:;" class="block menuName transi" :class="{'active': !serTitOn}" @click.stop="serShow = false;serTitOn=false">自定义检索</a>
            </div>
            <!--检索导航 end-->
            <!--检索内容选择 start-->
            <div class="searchTerm fl">
              <div v-show="serShow" class="commonSearch pr">
                <i class="serArr block pa"></i>
                <ul class="scrollBar">
                  <li class="textoverflow"  @click.stop="getSearchList(0,10,$event,'B48D7946-4AD4-428B-BCA0-AE1FC120A165')">图说</li>
                  <li class="textoverflow"  @click.stop="getSearchList(0,10,$event,'B48D7946-4AD4-428B-BCA0-AE1FC120A163')">解读</li>
                </ul>
              </div>
              <div v-show="!serShow" class="customSearch pr">
                <i class="serArr block pa"></i>
                <!--表单列表 start-->
                <Form class="scrollBar" ref="serformItem" :model="serformItem" :label-width="100">
                  <Row>
                    <Col span="12">
                    <FormItem label="标题" prop="nameInput">
                      <Input v-model="serformItem.nameInput" style="width: 165px" placeholder="请输入关键词"></Input>
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem label="类型" prop="selectedType">
                      <Select v-model="serformItem.selectedType" style="width: 165px">
                        <Option value="全部">全部</Option>
                        <Option value="B48D7946-4AD4-428B-BCA0-AE1FC120A165">图说</Option>
                        <Option value="B48D7946-4AD4-428B-BCA0-AE1FC120A163">解读</Option>
                      </Select>
                    </FormItem>
                    </Col>
                  </Row>
                  <FormItem class="pa serBtns" style>
                    <Button type="primary" @click.stop="getSearchList(0, 10)">查询</Button>
                    <Button @click="handleReset('serformItem')" class="ml10">重置</Button>
                  </FormItem>
                </Form>
                <!--表单列表 end-->
              </div>
            </div>
            <!--检索内容选择 end-->
          </div>
        </transition>
        <!--检索框 end-->
      </div>
    </div>
    <!--顶部工具条 end-->
    <!--右侧滑框 start-->
    <transition name="rightSlide" enter-active-class="animated bounceInRight" leave-to-class="animated bounceOutRight">
      <div class="RightSlide pa" v-show="rightEnter" @click.stop>
        <!--详情主体 start-->
        <div class="RightSlideBody pa">
          <Tabs type="card" :animated="false">
            <TabPane label="解读详情" class="scrollBar policyDetailBox">
              <div class="policyDetailTit">
                <p class="f18 textoverflow tc pt30">{{readData.readTitle?readData.readTitle:'无'}}</p>
                <div class="tc width100 f_9 f14 subTit pt15">
                  <p class="inlineblock">来源：<span>{{readData.policyDto?readData.policyDto.source:'无'}}</span></p>
                  <p class="inlineblock f16 ml15 mr15">|</p>
                  <p class="inlineblock">时间：<span>{{readData.policyDto?readData.policyDto.baseCreatetime:'无'}}</span></p>
                </div>
              </div>
              <div class="policyDetailCon f14 pt20 pb20">
                <div v-html="readData.readContent?readData.readContent:'无'"></div>
              </div>
            </TabPane>
          </Tabs>
        </div>
        <!--详情主体 end-->
      </div>
    </transition>
    <!--右侧滑框 end-->
    <!--表格列表 start-->
    <div @click.stop>
      <div id="mainTable">
        <table width="100%">
          <thead>
            <tr class="Table_Head">
              <th class="tc">序号</th>
              <th>标题</th>
              <th>类型</th>
              <th>发布时间</th>
            </tr>
          </thead>
          <tbody>
            <tr v-if="mainData.length >= 0" class="Table_List" :key="index" v-for="(item,index) in mainData">
              <td width="5%"><div class="textoverflow tc">{{index+1}}</div></td>
              <td width="50%"><div class="textoverflow detailShow"
                                   @click.stop="showEnterpriDetail(item.baseId)">{{item.readTitle?item.readTitle:'无'}}</div></td>
              <td width="20%"><div class="textoverflow">{{item.readTypeDto?item.readTypeDto.baseName:'无'}}</div></td>
              <td width="25%"><div class="textoverflow">{{item.policyDto?item.policyDto.baseCreatetime:'无'}}</div></td>
            </tr>
            <tr v-if="mainData.length === 0">
              <td colspan="10" class="tc" style="height: 70px;">
                <div v-show="isLoading" class="loading" style="margin-top: 5px;">
                  <Spin>
                    <Icon type="load-c" size=40 class="demo-spin-icon-load"></Icon>
                    <div class="mt30">Loading</div>
                  </Spin>
                </div>
                <span v-show="!isLoading">暂无相关数据</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="mt25 mr25 fr">
        <Page ref="pages" :total="totalNum" :page-size="pageSize" :current="1" @on-change="changePage"></Page>
      </div>
    </div>
    <!--表格列表 end-->
  </div>
</template>
<script>
  import '../../assets/css/animate.css';
  import Layout from '../layout';
  import { postAjax, getAjax} from "../../api/api.js";
  export default {
    props:["navSign"],
    data () {
      return {
        totalNum: 1,
        pageSize: 10,
        mainData: [],//主表数据
        readData:'',//解读详情数据
        valSearch:'',//检索-常用检索数据
        searchE:'',//检索
        baseId:'',//存储公共id
        // 显示隐藏等效果的控制变量
        beforeSelect: true,// 部门管理头部栏
        afterSelect: false,// 编辑栏
        searchShow: false,//搜索框显示隐藏
        searchColor: '#9c9c9c',//搜索框颜色设置
        backToListShow: false,//返回主表格按钮
        serShow: true,//检索主体内容切换
        serTitOn: true,//检索框标题选中
        rightEnter: false,//右侧滑框
        isLoading: true,//loading加载显示与否
        //搜索条件form数据存储
        serformItem: {
          nameInput: '',
          selectedType: '',
          areaSelect: ''
        }
      }
    },
    components: {
    },
    methods: {
      // 监听body并关闭弹出框
      bodyClick (){
        //关闭所有弹窗
        this.searchShow = false;
        this.searchColor = '#9c9c9c';
        this.rightEnter = false;
      },
      //搜索条件提交按钮功能
      handleSubmit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$Message.success('Success!');
          } else {
            this.$Message.error('Fail!');
          }
        })
      },
      //搜索条件重置按钮功能
      handleReset (name) {
        this.$refs[name].resetFields();
      },
      //请求区域数据
      getAreaData() {
        postAjax('/areaInfo/queryList', {
          "parentId": 35
        })
          .then((response) => {
            if(response.data.code === 0){
              this.areaData = response.data.obj;
            }else {
              this.$Message.warning("区域数据请求异常")
            }
          })
          .catch(error => {
            console.log(error);
          })
      },
      //请求主表格数据（含自定义检索）
      getPolicyExplainList(pageNum, pageSize, e, val) {
        this.isLoading = true;//开启loading加载动画
        this.mainData = [];//每次初始化时置空上一步存储的数据，获取真实的数据请求状态
        //置空参数
        this.valSearch = '';
        //自定义检索
        let param = {};
        let ifTitle = this.serformItem.nameInput === '' ;//标题
        let ifType = this.serformItem.selectedType === '' ;//类型
        if(!ifTitle){//搜索值不为空—标题
          let data = this.serformItem.nameInput;
          param.readTitle = data;//给json添加子对象
          this.backToListShow = true;
        };

        if(!ifType){//搜索值不为空—类型
          let data = this.serformItem.selectedType;
          if(data !== '全部'){//搜索值不全部
            param.readType = data;
          };
          this.backToListShow = true;
        };

        //常用检索
        if(val){
          this.valSearch = val;
          this.searchE = e;
          param.readType = val;
          this.backToListShow = true;
        }

        let stringParam = JSON.stringify(param);
        getAjax('/read/list/' + pageNum + '/' + pageSize+ '/' + stringParam)
          .then((response) => {
            if(response.data.code === 0){
              this.isLoading = false;
              this.mainData = response.data.obj.content;
              this.totalNum = response.data.obj.totalElements;
            }else {
              this.$Message.warning("数据请求异常")
            }
          })
          .catch(error => {
            this.$Loading.error();
            console.log(error);
          });
        this.bodyClick();//关闭检索窗
      },
      //请求查询
      getSearchList(pageNum, pageSize, e, val) {
        this.$refs['pages'].currentPage = 1;

        this.isLoading = true;
        this.mainData = [];
        //置空参数
        this.valSearch = '';
        //自定义检索
        let param = {};
        let ifTitle = this.serformItem.nameInput === '' ;//标题
        let ifType = this.serformItem.selectedType === '' ;//类型
        if(!ifTitle){//搜索值不为空—标题
          let data = this.serformItem.nameInput;
          param.readTitle = data;//给json添加子对象
          this.backToListShow = true;
        };

        if(!ifType){//搜索值不为空—类型
          let data = this.serformItem.selectedType;
          if(data !== '全部'){//搜索值不全部
            param.readType = data;
          };
          this.backToListShow = true;
        };

        //常用检索
        if(val){
          this.valSearch = val;
          this.searchE = e;
          param.readType = val;
          this.backToListShow = true;
        }

        let stringParam = JSON.stringify(param);
        getAjax('/read/list/' + pageNum + '/' + pageSize+'/'+ stringParam)
          .then((response) => {
            if(response.data.code === 0){
              this.isLoading = false;
              this.mainData = response.data.obj.content;
              this.totalNum = response.data.obj.totalElements;
            }else {
              this.$Message.warning("数据请求异常")
            }
          })
          .catch(error => {
            this.$Loading.error();
            console.log(error);
          });
        this.bodyClick();//关闭检索窗

      },
      //点击分页
      changePage(pageNum){
        this.getPolicyExplainList(pageNum - 1, this.pageSize, this.searchE, this.valSearch);
      },
      // 点击详情页展示
      showEnterpriDetail(id){
        this.searchColor='#9c9c9c';
        this.searchShow=false;
        //详情页展示隐藏
        if(this.rightEnter == false){
          this.rightEnter = true;//详情页展开
          if(this.navSign == false){//判断左侧菜单是否收缩
            this.$emit('navSlideToggle');//调用父组件方法控制导航收缩
          }
        };
        //存储当前行id
        this.baseId = id;
        //读取详情信息
        this.policyExplainDetail();
      },
      //政策解读详情
      policyExplainDetail(){
        getAjax('/read/'+this.baseId)
          .then((response) => {
            if(response.data.code === 0){
              this.readData = response.data.obj;
            }else {
              this.$Message.warning("数据请求异常")
            }
          })
      },
      //刷新页面
      reloadPage () {
        this.backToListShow=false;
        this.handleReset('serformItem');
        this.getSearchList(0,10);
      }
    },
    created() {
      document.querySelector('body').addEventListener('click', this.bodyClick);
    },
    mounted() {
      this.getPolicyExplainList(0, this.pageSize);
    },
    destroyed(){
      document.querySelector('body').removeEventListener('click', this.bodyClick);
    }
  }
</script>
<style scoped>
  body {
    height: 100%;
    background-color: #fff;
  }
  /*修改滚动条的样式*/
  /*滚动条样式*/
  .scrollBar::-webkit-scrollbar { /*滚动条整体样式*/
    width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }
  .scrollBar::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px #dddddd;
    background-color: #c7c7c7;
  }
  .scrollBar::-webkit-scrollbar-track { /*滚动条里面轨道*/
    border-radius: 0;
  }
  /*右侧滑出框样式*/
  .RightSlide {
    width: 80%;
    height: 100%;
    background-color: #fff;
    top: 0;
    right: 0;
    z-index: 10;
    box-shadow: 0px 0px 6px #ddd;
  }
  .RightSlideTit {
    width: 100%;
    height: 140px;
    left: 0;
    right:0;
    top:0;
  }
  .RightSlideTit .iconfont{
    color: #2399ee;
    font-size: 18px;
  }
  .RightSlide .titTable{
    margin-left: 30px;
    width: 95%;
  }
  .RightSlide .titTable td{
    height: 28px;
  }
  .RightSlide .toolTip li{
    padding: 0 5px;
    height: 24px;
    line-height:24px;
    background: #fa9749;
    border-radius: 3px;
    margin-right: 5px;
    color: #fff;
  }
  .RightSlideBody{
    width: 100%;
    top: 20px;
    left: 0;
    right: 0;
    bottom: 0;
  }
  /*检索框样式*/
  #searchPop {
    height: 238px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0px 0px 6px #e0e0e0;
    position: absolute;
    top: 45px;
    left: 98px;
    z-index: 9;
    background-color: #fff;
  }
  #searchPop .searchMenu{
    width: 88px;
    height: 100%;
    background: #293247;
    border-radius: 4px 0 0 4px;
    font-size: 12px;
  }
  #searchPop .searchTerm{
    height: 100%;
  }
  #searchPop .menuName{
    color: #ccc;
    height: 30px;
    line-height: 30px;
    padding-left: 13px;
  }
  #searchPop .menuName.active{
    color: #fff;
  }
  #searchPop .menuName:hover{
    color: #fff;
  }
  #searchPop .commonSearch{
    width: 308px;
    height: 100%;
    padding: 15px 10px 15px 20px;
  }
  #searchPop .commonSearch ul{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
  }
  #searchPop .commonSearch li{
    font-size: 14px;
    height: 30px;
    line-height:30px;

  }
  #searchPop .commonSearch li:hover{
    color: #2399ee;
    cursor: pointer;
  }
  #searchPop .commonSearch .serArr{
    left: -7px;
    top:25px;
  }
  #searchPop .customSearch{
    width: 580px;
    height: 100%;
    padding: 15px 10px 0px 15px;
  }
  #searchPop .customSearch .scrollBar{
    width: 100%;
    height: 175px;
  }
  #searchPop .customSearch .serArr{
    left: -7px;
    top: 53px;
  }
  .serBtns{
    bottom: -5px;
    right:25px;
  }
  .serBtns button{
    width: 70px;
  }

  #searchPop .serArr{
    width: 7px;
    height: 12px;
    background: url("../../../static/images/icon_searchArr.png");
    z-index: 10;
  }
  /*顶部标题栏及编辑栏样式*/
  .PageTitle {
    font-size: 16px;
    font-weight: bold;
    color: #666;
    height: 60px;
    line-height: 60px;
    padding-left: 25px;
  }
  .PageIcon {
    font-size: 20px;
    line-height: 60px;
    padding-left: 10px;
    cursor: pointer;
  }
  #topToolBar{
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #e0e0e0;
  }
  /*主表格样式mainTable*/
  #mainTable table{
    color: #666;
    border-bottom: 1px solid #e7eaec;
  }
  #mainTable table th{
    padding: 0 10px;
    height: 40px;
    background: #f3f5f9;
    border-right: 1px solid #e7eaec;
    font-weight: bold;
    font-size: 14px;
  }
  #mainTable table td{
    position: relative;
    height: 40px;
    line-height: 40px;
    border-right: 1px solid #e7eaec;
    font-size: 14px;
  }
  #mainTable table td div{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
  }
  #mainTable table td p{
    height: 40px;
    line-height: 40px;
  }
  #mainTable .Table_List:nth-of-type(even){
    background: #f3f5f9;
  }
  #mainTable .Table_List{
    border-top: 1px solid #e7eaec;
  }
  #mainTable .Table_List .detailShow{
    border: 1px solid rgba(0,0,0,0);
    cursor: pointer;
  }
  #mainTable .Table_List .detailShow:hover{
    border: 1px solid #2399ee;
    color: #2399ee;
  }
  /*详情—政策详情tab样式*/
  .policyDetailBox{
    padding: 0 30px;
  }
  .policyDetailTit{
    width: 100%;
    height: 110px;
    border-bottom: 1px solid #e2e2e2;
  }
  .policyDetailCon{
    width: 100%;
    line-height: 32px;
  }
  .policyDetailCon img{
    max-width: 100%;
    display: block;
    margin: 0 auto;
  }
  .policyDetailTit f18{
    margin-top: 30px;
  }
  .policyDetailTit .subTit{
    height: 22px;
    line-height: 22px;
  }
</style>
